<template>
  <div>
    <Crumbs title="首页" title2="权限" title3="用户列表" />

    <!-- 筛选搜索 -->
    <div class="Filtersearch">
      <div class="left">
        <el-icon><Search /></el-icon>
        <span>筛选搜索</span>
        <div class="chaxun">
          账号/姓名：<input
            type="text"
            v-model="formaParams.keyword"
            placeholder="请输入账号，姓名"
          />
        </div>
      </div>
      <div class="right">
        <el-button>重置</el-button>
        <el-button type="primary" @click="seachFn">查询搜索</el-button>
      </div>
    </div>
    <!-- 数据列表 -->
    <div class="datalist">
      <div class="left">
        <el-icon><Tickets /></el-icon>数据列表
      </div>
      <div class="right">
        <el-button @click="AddAdminFn" type="primary" v-permission="'addUser'"
          >新增用户</el-button
        >
      </div>
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="id" label="编号" />
        <el-table-column align="center" prop="username" label="账号" />
        <el-table-column align="center" prop="nickName" label="姓名" />
        <el-table-column align="center" prop="email" label="邮箱" />
        <el-table-column align="center" label="添加时间">
          <template #default="scope">
            {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="最后登录">
          <template #default="{ row }">
            {{
              row.loginTime
                ? dayjs(row.crloginTimeeateTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="是否启用">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="switchStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="操作">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="EditFn(row.id)"
              >编辑角色</el-button
            ><el-button link type="primary" size="small" @click="RoleFn(row.id)"
              >分配角色</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="paginationdata.currentPage"
      v-model:page-size="paginationdata.pageSize"
      :page-sizes="[5, 10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paginationdata.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <Edit
    @cancel="CancelFn"
    @confirm="ConfirmFn"
    :dialogVisible="dialogVisible"
    :id="editId"
  ></Edit>

  <Assignroles
    :RoleVisibleRole="RoleVisibleRole"
    @cancel="cancelroleFn"
    @confirm="confirmroleFn"
    :id="RoleId"
  />
</template>

<script setup lang="ts">
import Edit from "./admin/Edit.vue";
import { Search, Tickets } from "@element-plus/icons-vue";
import { dayjs, ElMessage } from "element-plus";
import Crumbs from "@/components/Crumbs/index.vue";
import * as http from "@/request/http";
import { UseTable } from "@/hooks/component/useTable";
import { reactive, ref } from "vue";
import Assignroles from "./admin/Assignroles.vue";

// let tableData = reactive([]);//不能将类型“ListModel[]”分配给类型“never[]”。

let formaParams = reactive<IAdminListParams>({
  keyword: "",
});

function seachFn() {
  adminLists();
}

// 添加用户信息
// 添加功能属性
let dialogVisible = ref(false);
let RoleVisibleRole = ref<boolean>(false);

// 定义id
const editId = ref(0);
const RoleId = ref<number>(0);

// 点击添加用户
function AddAdminFn() {
  console.log("asdf");
  dialogVisible.value = true;
  editId.value = 0;
}

// 取消函数
function CancelFn() {
  dialogVisible.value = false;
  editId.value = 0;
}
// 确认函数
function ConfirmFn() {
  dialogVisible.value = false;
  editId.value = 0;
  adminLists();
}

// 编辑用户信息功能
function EditFn(id: number) {
  dialogVisible.value = true;
  editId.value = id;
}

// 角色分配

// 分配角色
function RoleFn(id: number) {
  RoleVisibleRole.value = true;
  RoleId.value = id;
}
// 取消-监听处理函数
function cancelroleFn() {
  RoleVisibleRole.value = false;
}
// 确认-监听处理函数
function confirmroleFn() {
  RoleVisibleRole.value = false;
}

//修改用户状态
const switchStatus = (row: ListModel) => {
  console.log("row:", row.id, row.status);
  http.adminInfo
    .UpdateStatus(row.id, row.status)
    .then((res: { code: number }) => {
      if (res.code == 200) {
        ElMessage.success("修改成功");
      } else {
        ElMessage.error("修改失败");
        row.status = row.status === 1 ? 0 : 1;
      }
    })
    .catch((err: any) => {
      console.log("err:", err);
      row.status = row.status === 1 ? 0 : 1;
    });
};

let {
  tableData,
  paginationdata,
  handleSizeChange,
  handleCurrentChange,
  adminLists,
} = UseTable<IAdminListParams, adminListModel>(
  http.adminInfo.adminList,
  formaParams
);
</script>

<style lang="less" scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.Filtersearch {
  display: flex;
  box-shadow: 1px 1px 5px 1px #ccc;
  margin: 20px;
  justify-content: space-between;
  padding: 20px;

  .chaxun {
    margin: 15px 40px;
    input {
      border: 1px solid #ccc;
      padding: 5px;
      color: #222;
      outline: none;
    }
  }
}
.datalist {
  display: flex;
  background: #fff;
  box-shadow: 1px 1px 5px 1px #ccc;
  margin: 20px;
  justify-content: space-between;
  padding: 20px;
}

.el-icon {
  margin-right: 10px;
}

.table {
  margin: 20px;
  .el-table--fit {
    text-align: center;
  }
}
.el-pagination {
  margin: 20px;
}
</style>
